<div class="row">
  <div class="col-md-12">
    <nb-card size="big">
      <toaster-container [toasterconfig]="config"></toaster-container>
      <nb-card *ngIf="paper">
        <nb-card-header>{{paper.title}} --
          <span class="text-danger">
            <countdown #countdown [config]="{leftTime: 60 * ((paper && paper.paperDuration) || 90), demand: true}" (finished)="onFinished()"></countdown>
          </span>
          <button (click)="hidePaperCardHandle()" class="btn btn-hero-success btn-sm">答题卡</button>
        </nb-card-header>
        <nb-card-body *ngIf="!hidePaperCard">
          <div *ngIf="questionList" (click)="goToQuestion($event)">
            <label *ngFor="let q of questionList; let i = index">
              <button *ngIf="(q.youranswer || q.choiceA_answer || q.choiceA_answer || q.choiceB_answer || q.choiceC_answer || q.choiceD_answer || q.choiceE_answer || q.choiceF_answer); else elseBlock"
                id="{{i}}" class="btn btn-hero-success btn-tn"> {{i + 1}} </button>
              <ng-template #elseBlock>
                <button id="{{i}}" class="btn btn-hero-warning btn-tn"> {{i + 1}} </button>
              </ng-template>
            </label>
          </div>
          <button class="btn btn-hero-primary" (click)="save()" style="float:right">交卷</button>
        </nb-card-body>
      </nb-card>
      <nb-card *ngIf="questionList && questionList[currentIndex]">
        <nb-card-header [innerHTML]="(currentIndex + 1) + ' ' + questionList[currentIndex].title"></nb-card-header>
        <nb-card-body [ngSwitch]="questionList[currentIndex].qtype">
          <div *ngSwitchCase="'single_choice'">
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceA && questionList[currentIndex].choiceA != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>A</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceA"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceB && questionList[currentIndex].choiceB != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>B</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceB"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceC && questionList[currentIndex].choiceC != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>C</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceC"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceD && questionList[currentIndex].choiceD != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>D</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceD"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceE && questionList[currentIndex].choiceE != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>E</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceE"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceF && questionList[currentIndex].choiceF != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>F</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceF"></span>
              </label>
            </div>
          </div>
          <div *ngSwitchCase="'multiple_choice'">
            <div class="form-group row">
              <nb-checkbox *ngIf="questionList[currentIndex].choiceA && questionList[currentIndex].choiceA != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceA_answer"><span [innerHTML]="questionList[currentIndex].choiceA"></span></nb-checkbox>
              <nb-checkbox *ngIf="questionList[currentIndex].choiceB && questionList[currentIndex].choiceB != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceB_answer"><span [innerHTML]="questionList[currentIndex].choiceB"></span></nb-checkbox>
              <nb-checkbox *ngIf="questionList[currentIndex].choiceC && questionList[currentIndex].choiceC != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceC_answer"><span [innerHTML]="questionList[currentIndex].choiceC"></span></nb-checkbox>
              <nb-checkbox *ngIf="questionList[currentIndex].choiceD && questionList[currentIndex].choiceD != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceD_answer"><span [innerHTML]="questionList[currentIndex].choiceD"></span></nb-checkbox>
              <nb-checkbox *ngIf="questionList[currentIndex].choiceE && questionList[currentIndex].choiceE != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceE_answer"><span [innerHTML]="questionList[currentIndex].choiceE"></span></nb-checkbox>
              <nb-checkbox *ngIf="questionList[currentIndex].choiceF && questionList[currentIndex].choiceF != 'null'" class="col-md-12"
                [(ngModel)]="questionList[currentIndex].choiceF_answer"><span [innerHTML]="questionList[currentIndex].choiceF"></span></nb-checkbox>
            </div>
          </div>
          <div *ngSwitchCase="'true_false'">
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceA && questionList[currentIndex].choiceA != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>A</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceA"></span>
              </label>
            </div>
            <div class="form-group row" class="col-md-12" *ngIf="questionList[currentIndex].choiceB && questionList[currentIndex].choiceB != 'null'">
              <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="{{questionList[currentIndex].id}}" value="<p>B</p>" [(ngModel)]="questionList[currentIndex].youranswer">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description" [innerHTML]="questionList[currentIndex].choiceB"></span>
              </label>
            </div>
          </div>
          <div *ngSwitchCase="'fill_in_the_blanks'">
            <div class="input-group">
              <!-- <textarea rows="5" class="form-control" name="{{questionList[currentIndex].id}}" [(ngModel)]="questionList[currentIndex].youranswer"></textarea> -->
              <ngx-froala elementId="{{questionList[currentIndex].id}}" content="{{questionList[currentIndex].youranswer}}" (froala)="froalaContent($event)"></ngx-froala>
            </div>
          </div>
          <div *ngSwitchCase="'short_answer'">
            <div class="input-group">
              <!-- <textarea rows="5" class="form-control" name="{{questionList[currentIndex].id}}"
                [(ngModel)]="questionList[currentIndex].youranswer"></textarea> -->
              <ngx-froala elementId="{{questionList[currentIndex].id}}" content="{{questionList[currentIndex].youranswer}}" (froala)="froalaContent($event)"></ngx-froala>
            </div>
          </div>
          <div *ngSwitchCase="'case_analysis'">
            <div class="input-group">
              <!-- <textarea rows="5" class="form-control" name="{{questionList[currentIndex].id}}"
                [(ngModel)]="questionList[currentIndex].youranswer"></textarea> -->
              <ngx-froala elementId="{{questionList[currentIndex].id}}" content="{{questionList[currentIndex].youranswer}}" (froala)="froalaContent($event)"></ngx-froala>
            </div>
          </div>
        </nb-card-body>
      </nb-card>
      <nb-card-body>
        <div class="icon-button-examples">
          <button (click)="previousQuestion()" class="btn btn-hero-success btn-icon">
            <i class="nb-skip-backward-outline"></i>
          </button>
          <button (click)="nextQuestion()" class="btn btn-hero-success btn-icon">
            <i class="nb-skip-forward-outline"></i>
          </button>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>